<template>
    <div class="big_box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>采购管理</el-breadcrumb-item>
            <el-breadcrumb-item>申购列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-form :model="selectfrom" ref="_selectfrom">
            <el-row :gutter="5">
                <el-col :span="3">
                    <el-input placeholder="申购单号" v-model="selectfrom.applyPurchase.ApplyPurchaseNumber"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-input placeholder="物资名称" v-model="selectfrom.DeviceName"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-input placeholder="物资编号" v-model="selectfrom.DeviceNumber"></el-input>
                </el-col>
                <el-col :span="3">
                    <el-date-picker style="width: 100%" placeholder="开始时间"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    v-model="selectfrom.Start"></el-date-picker>
                </el-col>
                <el-col :span="3">
                    <el-date-picker style="width: 100%" placeholder="结束时间"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    v-model="selectfrom.End"></el-date-picker>
                </el-col>
                <el-col :span="3">
                    <el-select placeholder="请选择部门" v-model="selectfrom.applyPurchase.DepartmentId">
                        <el-option disabled :value="0" label="请选择部门"></el-option>
                        <el-option v-for="v in AllDepartment" :value="v.Id" :label="v.DepartmentName"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select placeholder="请选择项目" filterable v-model="selectfrom.applyPurchase.ProjectId">
                        <el-option :value="0" label="请选择项目"></el-option>
                        <el-option v-for="v in AllProject" :value="v.Id" :label="v.ProjectName"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select placeholder="付款方式" v-model="selectfrom.applyPurchase.PayMethod">
                        <el-option :value="-1" label="付款方式"></el-option>
                        <el-option :value="0" label="借款"></el-option>
                        <el-option :value="1" label="对公账户"></el-option>
                        <el-option :value="2" label="电子账户"></el-option>
                        <el-option :value="4" label="备用金"></el-option>
                        <el-option :value="8" label="垫付"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row :gutter="5" style="padding:10px 0px">
                <el-col :span="3">
                    <el-select placeholder="申购单状态" v-model="selectfrom.applyPurchase.State">
                        <el-option :value="0" label="单据状态"></el-option>
                        <el-option :value="1" label="待签批"></el-option>
                        <el-option :value="2" label="部长签批"></el-option>
                        <el-option :value="4" label="运营副总签批"></el-option>
                        <el-option :value="8" label="总经理签批"></el-option>
                    </el-select>
                </el-col>
                <!--<el-col :span="2.5" style="line-height: 38px">
                    <el-switch inactive-text="我未审核" v-model="selectfrom.NoChecked" border></el-switch>
                </el-col>-->
                <el-col :span="1.5">
                    <el-checkbox style="width:100%" v-model="selectfrom.NoChecked" label="我未审核" border></el-checkbox>
                </el-col>
                <el-col :span="2">
                    <el-button plain type="success" icon="el-icon-search" @click="formdata"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-row style="padding-bottom: 10px">
            <el-col>
                <el-button-group>
                    <el-button class="buttongroup" type="danger" icon="el-icon-delete" @click="BatchDelete_event">批量删除
                    </el-button>
                    <el-button class="buttongroup" type="success" icon="el-icon-circle-plus-outline"
                               @click="Add_ApplyPurchase_dialog=true">添加申购
                    </el-button>
                </el-button-group>
                <span style="color: red;font-size: 14px">温馨提示：目前申购流程已取消，请直接进行采购操作</span>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table :data="tableData" border stripe style="width: 100%" @selection-change="SelectionChange_event">
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column fixed type="index" label="序号" width="50" align="center"
                                     :index="indexMethod"></el-table-column>
                    <el-table-column fixed prop="ApplyPurchaseNumber" label="编号" align="center" show-overflow-tooltip
                                     width="120"></el-table-column>
                    <el-table-column prop="DepartmentId" label="申购部门" align="center" show-overflow-tooltip width="120">
                        <template slot-scope="slot">
                            {{ GetDepartmentName(slot.row.DepartmentId) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="ApplyUserId" label="申购人" show-overflow-tooltip align="center" width="120">
                        <template slot-scope="slot">
                            {{ GetUserName(slot.row.ApplyUserId) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="TotalPrice" label="总金额" show-overflow-tooltip
                                     align="center"></el-table-column>
                    <el-table-column prop="DeliveryDate" label="期望交付日期" show-overflow-tooltip align="center"
                                     width="120">
                        <template slot-scope="scope">
                            {{ frmdate(scope.row.DeliveryDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="PayMethod" label="付款方式" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            <label v-if="slot.row.PayMethod==0">借款</label>
                            <label v-if="slot.row.PayMethod==1">对公</label>
                            <label v-if="slot.row.PayMethod==2">电子账户</label>
                            <label v-if="slot.row.PayMethod==4">备用金</label>
                            <label v-if="slot.row.PayMethod==8">垫付</label>
                        </template>
                    </el-table-column>
                    <el-table-column prop="State" label="状态" show-overflow-tooltip align="center" width="120">
                        <template slot-scope="slot">
                            <div v-html="InitStateColum(slot.row)"></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="ApplyPurchaseCause" label="用途说明" show-overflow-tooltip
                                     align="center"></el-table-column>
                    <el-table-column prop="ProjectId" label="项目" show-overflow-tooltip align="center" width="120">
                        <template slot-scope="slot">
                            {{ GetProjectName(slot.row.ProjectId) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="PurchaseType" label="采购类型" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            <label v-if="slot.row.PurchaseType==0"></label>
                            <label v-if="slot.row.PurchaseType==1">办公用品</label>
                            <label v-if="slot.row.PurchaseType==2">生产原料</label>
                            <label v-if="slot.row.PurchaseType==4">仪器设备</label>
                            <label v-if="slot.row.PurchaseType==8">其他</label>
                        </template>
                    </el-table-column>
                    <el-table-column prop="IsInvoice" label="是否有发票" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            <label v-if="slot.row.IsInvoice">是</label>
                            <label v-else>否</label>
                        </template>
                    </el-table-column>
                    <el-table-column prop="AdvanceParty" label="垫付人" show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            {{ GetUserName(slot.row.AdvanceParty) }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="320" align="center">
                        <template slot-scope="scope">
                            <el-button plain type="warning" @click="applyPurchaseOrder_event(scope.row)" size="mini">
                                申购单
                            </el-button>
                            <el-button plain type="info" size="mini" @click="handleClick(scope.row,true)">查看</el-button>
                            <el-button plain @click="handleClick(scope.row,false)" type="success" size="mini">编辑
                            </el-button>
                            <el-button plain type="danger" size="mini" @click="BatchDeleteOne_event(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block">
                    <el-pagination
                            @size-change="formdata"
                            @current-change="formdata"
                            :current-page.sync="pagination.currentPage"
                            :page-sizes="pagination.pagesizes"
                            :page-size.sync="pagination.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-dialog :visible.sync="Add_ApplyPurchase_dialog" title="添加申购" top="10px" width="85%"
                   @close="AddApplyPurchaseCloseEvent">
            <AddApplyPurchase ref="AddApplyPurchaserefs" :all-project="AllProject" :all-department="AllDepartment"
                              :all-device-category="AllDeviceCategory"
                              :all-device-state="AllDeviceState"></AddApplyPurchase>
        </el-dialog>

        <el-dialog :visible.sync="Update_ApplyPurchase.dialog" top="10px" :title="'修改申购单---'+Update_ApplyPurchase.title"
                   width="85%">
            <UpdateApplyPurchase :is-see="IsSee" :apply-purchase="ApplyPurchaseDetails" :all-project="AllProject"
                                 :all-department="AllDepartment" :all-device-category="AllDeviceCategory"
                                 :all-device-state="AllDeviceState"></UpdateApplyPurchase>
        </el-dialog>

        <el-dialog :visible.sync="Table_ApplyPurchase.dialog" width="100%" :fullscreen="true"
                   :title="'申购单---'+Table_ApplyPurchase.title" :before-close="onClose">
            <ApplyPurchaseTable :audit-rule="auditRule" :applypurchase="ApplyPurchaseDetails_table"
                                :all-department="AllDepartment" :all-project="AllProject"></ApplyPurchaseTable>
        </el-dialog>


    </div>
</template>

<script>
    import * as publicjs from "../../../../public/Scriput/Public";
    import AddApplyPurchase from "./AddApplyPurchase";
    import UpdateApplyPurchase from "./UpdateApplyPurchase";
    import ApplyPurchaseTable from "./ApplyPurchaseTable";

    export default {
        name: "ApplyPurchase",
        components: {
            'AddApplyPurchase': AddApplyPurchase,
            'UpdateApplyPurchase': UpdateApplyPurchase,
            'ApplyPurchaseTable': ApplyPurchaseTable,
        },
        data() {
            return {
                //表格查询数据
                selectfrom: {
                    applyPurchase: {
                        DepartmentId: 0,
                        ProjectId: 0,
                        ApplyPurchaseNumber: '',
                        State: 0,
                        PayMethod: -1,
                    },
                    DeviceName: '',
                    DeviceNumber: '',
                    Start: '',
                    End: '',
                    NoChecked: false,
                },
                //表格数据
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 100
                },
                //多选列表的数据集合
                SelectMore_lis: [],
                //所有部门数据
                AllDepartment: [],
                //物品状态
                AllDeviceState: [],
                //所有物资分类
                AllDeviceCategory: [],
                //所有项目
                AllProject: [],
                //新建申购弹框
                Add_ApplyPurchase_dialog: false,
                //申购单审批表格弹框
                Update_ApplyPurchase: {
                    dialog: false,
                    title: '',
                },
                //申购单详情数据,用于编辑
                ApplyPurchaseDetails: {},
                ApplyPurchaseDetails_table: {},
                //用于表示查看/编辑
                IsSee: false,
                Table_ApplyPurchase: {
                    dialog: false,
                    title: '',
                },
                //审批数据
                auditRule: {},
            }
        },
        created() {
            this.Init()
            this.formdata()
        },
        watch: {},
        methods: {
            //初始数据加载
            Init() {
                this.AllProject = publicjs.GetAllProject(this.$http)
                this.AllDepartment = publicjs.GetAllDepartment(this.$http)
                this.AllDeviceState = publicjs.GetAllDeviceState(this.$http)
                this.AllDeviceCategory = publicjs.GetAllDeviceCategory(this.$http)
            },
            frmdate(obj) {
                return obj.split(' ')[0]
            },
            //表格数据序列号
            indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            //初始化表格数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Purchase/GetApplyPurchaseDetail', {
                    currentPage: this.pagination.currentPage,
                    pagesize: this.pagination.pagesize,
                    Start: this.selectfrom.Start,
                    End: this.selectfrom.End,
                    NoChecked: this.selectfrom.NoChecked,
                    DeviceName: this.selectfrom.DeviceName,
                    DeviceNumber: this.selectfrom.DeviceNumber,
                    applyPurchase: this.selectfrom.applyPurchase,
                }).then(res => {
                    loadding.close();
                    this.pagination.total = res.data.count
                    this.tableData = res.data.data
                }).catch(() => {
                    loadding.close();
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            //表格单个删除
            BatchDeleteOne_event(obj) {
                this.$http.get('Purchase/ValidateApplyPurchaseState?data=' + obj.ApplyPurchaseNumber).then(res => {
                    if (!res.data.IsSuccess) {
                        this.$message.warning(res.data.Msg)
                        return false
                    } else {
                        this.SelectMore_lis.push(obj)
                        this.BatchDelete_event()
                    }
                })
            },
            //编辑
            handleClick(obj, Isshow) {
                this.$http.get('Purchase/ValidateApplyPurchaseState?data=' + obj.ApplyPurchaseNumber).then(res => {
                    if (res.data.IsSuccess) {
                        let newdata = JSON.stringify(obj)
                        this.ApplyPurchaseDetails = JSON.parse(newdata)
                        this.Update_ApplyPurchase.dialog = true
                        this.Update_ApplyPurchase.title = obj.ApplyPurchaseNumber
                        this.IsSee = Isshow
                    } else {
                        this.$message.warning(res.data.Msg)
                    }

                    // if (!res.data.IsSuccess) {
                    //     this.$message.warning(res.data.Msg)
                    //     return false
                    // } else {
                    //     if (obj.ApplyUserId == this.$store.state.user.id) {
                    //         let newdata = JSON.stringify(obj)
                    //         this.ApplyPurchaseDetails = JSON.parse(newdata)
                    //         this.Update_ApplyPurchase.dialog = true
                    //         this.Update_ApplyPurchase.title = obj.ApplyPurchaseNumber
                    //         this.IsSee = Isshow
                    //     } else {
                    //         this.$message.warning('操作失败，只能操作本部门或者本人提交的申购单')
                    //     }
                    // }
                })
            },
            //批量删除
            BatchDelete_event() {
                let idlis = []
                if (this.SelectMore_lis.length == 0) {
                    this.$message.warning('您还未选择需要删除的设备!')
                } else {
                    for (let i = 0; i < this.SelectMore_lis.length; i++) {
                        idlis.push(this.SelectMore_lis[i].ApplyPurchaseNumber)
                    }
                    this.$confirm('你确定要删除吗?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'error'
                    }).then(() => {
                        let loadding = this.openLoading();
                        this.$http.post('Purchase/DeleteApplyPurchaseContent', idlis).then(res => {
                            loadding.close();
                            if (res.data.IsSuccess) {
                                this.$message.success(res.data.Msg)
                                this.formdata()
                                this.SelectMore_lis = []
                            } else {
                                this.$message.warning(res.data.Msg)
                            }
                        }).catch(() => {
                            loadding.close();
                            this.$message.error('服务器异常,请联系管理员!')
                        })
                    }).catch(() => {
                        this.$message.info('已取消!')
                        this.SelectMore_lis = []
                    })

                }
            },
            //获取对应人员名字
            GetUserName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.$store.state.AllUsers.length; i++) {
                        if (this.$store.state.AllUsers[i].Id == value) {
                            name = this.$store.state.AllUsers[i].UserName
                            return name
                        }
                    }
                }
            },
            //获取对应部门名字
            GetDepartmentName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllDepartment.length; i++) {
                        if (this.AllDepartment[i].Id == value) {
                            name = this.AllDepartment[i].DepartmentName
                            return name
                        }
                    }
                }
            },
            //获取对应项目名字
            GetProjectName(value) {
                let name = ''
                if (value != 0) {
                    for (let i = 0; i < this.AllProject.length; i++) {
                        if (this.AllProject[i].Id == value) {
                            name = this.AllProject[i].ProjectName
                            return name
                        }
                    }
                }
            },
            //状态
            InitStateColum(obj) {
                return publicjs.InitStateColum(obj)
            },
            //表格数据选择事件
            SelectionChange_event(value) {
                this.SelectMore_lis = value
            },
            //申购审批单
            applyPurchaseOrder_event(obj) {
                this.$http.get('Report/ApplyPurchaseOrder?ApplyPurchaseNumber=' + obj.ApplyPurchaseNumber).then(res => {
                    if (res.data.obj != null) {
                        this.auditRule = res.data.auditRule
                        this.ApplyPurchaseDetails_table = res.data.obj
                        this.Table_ApplyPurchase.dialog = true
                        this.Table_ApplyPurchase.title = obj.ApplyPurchaseNumber
                        let reportMianShow = window.parent.document.getElementsByClassName("reportMianShow");
                        for (let i = 0; i < reportMianShow.length; i++) {
                            reportMianShow[i].style.display = "none";
                        }
                    }
                })
            },
            //添加申购关闭
            AddApplyPurchaseCloseEvent() {
                this.$refs['AddApplyPurchaserefs'].dialog_close()
            },
            async onClose(done){
                await done();
                let reportMianShow = window.parent.document.getElementsByClassName("reportMianShow");
                for (let i = 0; i < reportMianShow.length; i++) {
                    reportMianShow[i].style.display = "inline-block";
                }
            },
        }
    }
</script>

<style scoped>

</style>
